<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="700px"
    @close="close"
  >
    <el-form ref="formRef" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="选择地区">
        <el-cascader
          v-model="form.cityArea"
          :options="cityOptions"
          :props="citySelect"
          placeholder="选择地区"
          clearable
        />
      </el-form-item>
      <el-form-item label="选择行业">
        <el-cascader
          v-model="form.industry"
          :options="industryOptions"
          :props="industrySelect"
          placeholder="选择行业"
          clearable
        />
      </el-form-item>
      <el-form-item label="关键词">
        <el-input
          v-model.trim="form.searchKey"
          clearable
          placeholder="请输入客户名称或合同编号"
        />
      </el-form-item>
      <el-form-item label="业务类型">
        <el-cascader
          v-model="form.industry"
          :options="industryOptions"
          :props="industrySelect"
          placeholder="业务类型"
          clearable
        />
      </el-form-item>
      <el-form-item label="选择产品">
        <el-cascader
          v-model="form.industry"
          :options="industryOptions"
          :props="industrySelect"
          placeholder="选择产品"
          clearable
        />
      </el-form-item>
      <el-form-item label="合同属性">
        <el-select v-model="form.orderType">
          <el-option label="新签" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务周期">
        <date-select ref="DateSelectRef" @get-date="getDate" />
      </el-form-item>
      <el-form-item label="小记类型">
        <el-select>
          <el-option label="跟进小记" />
          <el-option label="服务小记" />
          <el-option label="客满小记" />
          <el-option label="店铺后台数据" />
        </el-select>
      </el-form-item>
      <el-form-item label="有没有写小记">
        <el-select>
          <el-option label="没写小记的" />
          <el-option label="写了小记的" />
        </el-select>
      </el-form-item>
      <el-form-item label="流程进度">
        <el-select placeholder="流程进度">
          <el-option />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确定查询</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit } from '@/api/businessSatisfactionService'
  import DateSelect from '/src/components/DateSelect.vue'

  export default defineComponent({
    name: 'BusinessSatisfactionServiceSearch',
    components: { DateSelect },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = () => {
        state.title = '客满查询'
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
  })
</script>
